﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>门票预订</title>
    <!--<link rel="stylesheet" href="../Styles/TicketList.css"/>-->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            overflow: auto;
            font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "黑体", Arial, sans-serif;
            font-size: 10px;
            height: 100%;
            -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        a {
            text-decoration: none;
            background-color: transparent;
        }

        ul,
        ol {
            list-style: none;
        }

        .container {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }

        .tab-navs {
            width: 100%;
            position: fixed;
            z-index: 9999;
            background: #fff;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        }

            .tab-navs li {
                width: 33%;
                border-bottom: 3px solid #fff;
                cursor: pointer;
                padding: 8px 0 8px 0;
                text-align: center;
                border-left: 1px solid #ccc;
                font-size: 16px;
                float: left;
            }

            .tab-navs a:first-child {
                border-left: none;
                width: 34%;
            }

            .tab-navs li.active {
                color: #62b900;
                border-bottom: 3px solid #62b900;
            }

        .tabs-container {
            width: 100%;
            padding-top: 40px;
        }

        .ticket-list {
            width: 100%;
            padding: 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

            .ticket-list li {
                position: relative;
                width: 100%;
                height: 12rem;
                border-radius: 5px;
                margin-bottom: 10px;
                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
            }

        .disable {
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(1);
            -o-filter: grayscale(1);
            filter: grayscale(1);
        }

        .ticket-list .ticket-detail {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            background-size: cover;
        }

            .ticket-list .ticket-detail .title {
                width: 100%;
                height: 35px;
                padding-left: 20px;
                line-height: 35px;
                position: absolute;
                bottom: 0;
                left: 0;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                background: rgba(0, 0, 0, .4);
                font-size: 16px;
                color: #fff;
                box-sizing: border-box;
            }

        .ticket-list .recommend {
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background: url(../images/t.png) 0 0 no-repeat;
            color: #fff;
            font-size: 10px;
            text-align: center;
        }

        .ticket-list .tip {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

            .ticket-list .tip span {
                position: absolute;
                width: 80px;
                height: 30px;
                line-height: 30px;
                top: 50%;
                left: 50%;
                margin-left: -40px;
                margin-top: -15px;
                border: 1px double #a10000;
                font-size: 16px;
                color: #a10000;
                text-align: center;
                -webkit-transform: rotate(30deg);
                transform: rotate(30deg);
            }
    </style>
    <link href="../style/swiper.min.css" rel="stylesheet" />
    <script src="../javaScripts/zepto.min.js"></script>
    <script src="../javaScripts/knockout-3.3.0.js"></script>
</head>
<body>
    <div class="container">
        <ul class="tab-navs">
            <li class="active">全部</li>
            <li>门票</li>
            <li>车票</li>
        </ul>
        <div id="tabs-container" class="swiper-container tabs-container" style="display: none" data-bind="visible: Data">
            <div class="swiper-wrapper" data-bind='foreach: Data'>
                <div class="swiper-slide">
                    <ul class="ticket-list" data-bind='foreach: content'>
                        <li>
                            <a data-bind="attr: { 'href': 'TicketDetail.html?ticketid=' + ticketCategoryId + '&ticketName=' + ticketName + '&price=' + price + '&code=' + $root.access_code }">
                                <div class="ticket-detail" data-bind="style: { backgroundImage: image }">
                                    <span class="title">
                                        <!--ko text: ticketName-->
                                        <!--/ko-->
                                        <span class="price">
                                            <!--ko text: price-->
                                            <!--/ko-->
                                            元
                                        </span>
                                    </span>
                                </div>
                                <span class="recommend"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="../javaScripts/oAuth2.js"></script>
    <script src="../javaScripts/swiper.min.js"></script>
    <script>
        $(function () {

            loadTicket();
        });
    </script>
    <script type="text/javascript">
        function loadTicket() {
            $.ajax({
                type: "post",
                url: '../WebService/OrderWebService.asmx/TicketCategoryList',
                dataType: 'json',
                success: function (result) {
                    if (result.IsSuccess) {
                        result.access_code = getCode();
                        ko.applyBindings(result);
                        initSwiper();
                    } else {
                        alert(result.Message);
                    }
                }
            });
        }

        function initSwiper() {
            var tabsSwiper = new Swiper('.swiper-container', {
                speed: 500,
                onSlideChangeStart: function () {
                    $(".tab-navs li.active").removeClass('active');
                    $(".tab-navs li").eq(tabsSwiper.activeIndex).addClass('active');
                },
                onSlideChangeEnd: function (swiper) {
                    var scrollingElement = document.documentElement;
                    if (document.scrollingElement) {
                        scrollingElement = document.scrollingElement;
                    }
                    scrollingElement.scrollTop = 0;
                    document.body.scrollTop = 0;
                }
            });

            $(".tab-navs").on('touchstart mousedown', 'li', function (e) {
                e.preventDefault();
                $(".tab-navs .active").removeClass('active');
                $(this).addClass('active');
                tabsSwiper.slideTo($(this).index());
            });
            $(".tab-navs a").click(function (e) {
                e.preventDefault();
            });
        }

        function getCode() {
            return access_code;
        }
    </script>
</body>
</html>
